<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    // 注意：setState更新数据状态是异步的，但也有同步的情况（17的版本中）
    //      setState可以调用多次，会集中一次更新。
    const root = ReactDOM.createRoot(document.querySelector("#root"));

    class App extends React.Component {
        state = {
            num: 1,
            userName:"zhangsan"
        }

        changeNum(){
            // this.setState更新状态的行为是异步的
            // this.setState({
            //     num:this.state.num+1
            // })
            // console.log(this.state.num);// 1


            // 将num+1,将userName尾部增加！
            // this.setState({
            //     num:this.state.num+1,
            //     userName:this.state.userName+"!"
            // })

            // 将num,userName分别通过 this.setState更新
            // this.setState({
            //     num:this.state.num+2
            // })
            //
            // this.setState({
            //     userName:this.state.userName+"!"
            // })


            // 官方：在使用setState时，如果要在原来的状态基础之上进行操作的话，建议使用this.setState(函数)
            // 1- this.setState接收两个参数，第一个参数可以是对象也可以是函数，第二个参数是函数
            // this.setState({
            //     num:this.state.num+1
            // },()=>{
            //     // 在什么时候执行
            //     // 当数据状态更新完毕且视图更新完毕之后执行
            //     console.log(this.state.num);// 2
            //     console.log(document.querySelector("button").innerText);// 2
            // })

            // 2- this.setState是异步的，以下程序只是起到了加1的效果
            // this.setState({num:2})
            this.setState({
                num:this.state.num+1
            })
            // this.setState({num:2})
            this.setState({
                num:this.state.num+1
            })
            // this.setState({num:2})
            this.setState({
                num:this.state.num+1
            })

            // 3- 将第一个参数设置为函数
            // this.setState((prevState)=>{
            //     console.log(prevState.num);// 1
            //     return {
            //         num:prevState.num+1
            //     }
            // })
            //
            // this.setState((prevState)=>{
            //     console.log(prevState.num);// 2
            //     return {
            //         num:prevState.num+1
            //     }
            // })
            //
            // this.setState((prevState)=>{
            //     console.log(prevState.num);// 3
            //     return {
            //         num:prevState.num+1
            //     }
            // },()=>{
            //     console.log(1111,this.state.num)
            // })

        }
        render() {
            return (
                <>
                    <button onClick={this.changeNum.bind(this)}>{this.state.num}</button>
                    <p>{this.state.userName}</p>
                </>

            )
        }
    }

    root.render((
        <App></App>
    ))
</script>
</html>